<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style>
        .row {
            margin-top: 1%;
        }
    </style>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.4/socket.io.js"></script>
    <title>Blockbook Socket.io Test Page</title>
    <script>
        var socket;
        function connect(server) {
            socket = io(server, { transports: ['websocket'] });
            socket.on('connect', function () {
                console.log('socket connected');
                document.getElementById('connectionStatus').innerText = "connected";
            });
        }

        function getAddressTxids() {
            var addresses = document.getElementById('getAddressTxidsAddresses').value.split(",");
            addresses = addresses.map(s => s.trim());
            var mempool = document.getElementById("getAddressTxidsMempool").checked;
            lookupTransactionsIdsMempool(addresses, mempool, 20000000, 0, function (result) {
                console.log('getAddressTxids sent successfully');
                console.log(result);
                document.getElementById('getAddressTxidsResult').innerText = JSON.stringify(result).replace(/,/g, ", ");
            });
        }

        function lookupTransactionsIdsMempool(addresses, mempool, start, end, f) {
            const method = 'getAddressTxids';
            const rangeParam = mempool ? {
                start,
                end,
                queryMempoolOnly: true,
            } : {
                    start,
                    end,
                    queryMempol: false,
                };
            const params = [
                addresses,
                rangeParam,
            ];
            return socket.send({ method, params }, f);
        }

        function getAddressHistory() {
            var addresses = document.getElementById('getAddressHistoryAddresses').value.split(",");
            addresses = addresses.map(s => s.trim());
            var mempool = document.getElementById("getAddressHistoryMempool").checked;
            var from = parseInt(document.getElementById("getAddressHistoryFrom").value);
            var to = parseInt(document.getElementById("getAddressHistoryTo").value);
            lookupAddressHistories(addresses, from, to, mempool, 90000000, 0, function (result) {
                console.log('getAddressHistory sent successfully');
                console.log(result);
                document.getElementById('getAddressHistoryResult').innerText = JSON.stringify(result).replace(/,/g, ", ");
            });
        }

        function lookupAddressHistories(addresses, from, to, mempool, start, end, f) {
            const method = 'getAddressHistory';
            const opts = mempool ? {
                start, // needed for older bitcores (so we don't load all history if bitcore-node < 3.1.3)
                end,
                queryMempoolOnly: true,
            } : {
                    start,
                    end,
                    queryMempol: false,
                };
            const params = [
                addresses,
                {
                    ...opts,
                    from,
                    to,
                },
            ];
            return socket.send({ method, params }, f);
        }

        function lookupTransactionsIdsMempool(addresses, mempool, start, end, f) {
            const method = 'getAddressTxids';
            const opts = mempool ? {
                start,
                end,
                queryMempoolOnly: true,
            } : {
                    start,
                    end,
                    queryMempol: false,
                };
            const params = [
                addresses,
                opts,
            ];
            return socket.send({ method, params }, f);
        }

        function getBlockHeader() {
            var param = document.getElementById('getBlockHeaderParam').value.trim();
            lookupBlockHash(isHash(param) ? param : parseInt(param), function (result) {
                console.log('getBlockHeader sent successfully');
                console.log(result);
                document.getElementById('getBlockHeaderResult').innerText = JSON.stringify(result).replace(/,/g, ", ");
            });
        }

        function isHash(str) {
            var re = /[0-9A-Fa-f]{64}/g;
            return re.test(str);
        }

        function lookupBlockHash(heightOrHash, f) {
            const method = 'getBlockHeader';
            const params = [heightOrHash];
            return socket.send({ method, params }, f);
        }

        function estimateSmartFee() {
            var blocks = document.getElementById('estimateSmartFeeBlocks').value.trim();
            var conservative = document.getElementById("estimateSmartFeeConservative").checked;
            estimateSmartTxFee(parseInt(blocks), conservative, function (result) {
                console.log('estimateSmartFee sent successfully');
                console.log(result);
                document.getElementById('estimateSmartFeeResult').innerText = JSON.stringify(result).replace(/,/g, ", ");
            });
        }

        function estimateSmartTxFee(blocks, conservative, f) {
            const method = 'estimateSmartFee';
            const params = [blocks, conservative];
            return socket.send({ method, params }, f);
        }

        function estimateFee() {
            var blocks = document.getElementById('estimateFeeBlocks').value.trim();
            estimateTxFee(parseInt(blocks), function (result) {
                console.log('estimateFee sent successfully');
                console.log(result);
                document.getElementById('estimateFeeResult').innerText = JSON.stringify(result).replace(/,/g, ", ");
            });
        }

        function estimateTxFee(blocks, f) {
            const method = 'estimateFee';
            const params = [blocks];
            return socket.send({ method, params }, f);
        }

        function getInfo() {
            lookupSyncStatus(function (result) {
                console.log('getInfo sent successfully');
                console.log(result);
                document.getElementById('getInfoResult').innerText = JSON.stringify(result).replace(/,/g, ", ");
            });
        }

        function lookupSyncStatus(f) {
            const method = 'getInfo';
            const params = [];
            return socket.send({ method, params }, f);
        }

        function getDetailedTransaction() {
            var hash = document.getElementById('getDetailedTransactionHash').value.trim();
            lookupDetailedTransaction(hash, function (result) {
                console.log('getDetailedTransaction sent successfully');
                console.log(result);
                document.getElementById('getDetailedTransactionResult').innerText = JSON.stringify(result).replace(/,/g, ", ");
            });
        }

        function lookupDetailedTransaction(hash, f) {
            const method = 'getDetailedTransaction';
            var params = [
                hash,
            ];
            return socket.send({ method, params }, f);
        }

        function sendTransaction() {
            var tx = document.getElementById('sendTransactionHex').value.trim();
            sendTransactionF(tx, function (result) {
                console.log('sendTransaction sent successfully');
                console.log(result);
                document.getElementById('sendTransactionResult').innerText = JSON.stringify(result).replace(/,/g, ", ");
            });
        }

        function sendTransactionF(hex, f) {
            const method = 'sendTransaction';
            const params = [
                hex,
            ];
            return socket.send({ method, params }, f);
        }

        function subscribeHashBlock() {
            socket.emit('subscribe', "bitcoind/hashblock", function (result) {
                console.log('subscribe bitcoind/hashblock sent successfully');
                console.log(result);
            });
            socket.on("bitcoind/hashblock", function (result) {
                console.log('on bitcoind/hashblock');
                console.log(result);
                document.getElementById('subscribeHashBlockResult').innerText += JSON.stringify(result).replace(/,/g, ", ") + "\n";
            });
        }

        function subscribeAddressTxid() {
            var addresses = document.getElementById('subscribeAddressTxidAddresses').value.split(",");
            addresses = addresses.map(s => s.trim());
            socket.emit('subscribe', "bitcoind/addresstxid", addresses, function (result) {
                console.log('subscribe bitcoind/addresstxid sent successfully');
                console.log(result);
            });
            socket.on("bitcoind/addresstxid", function (result) {
                console.log('on bitcoind/addresstxid');
                console.log(result);
                document.getElementById('subscribeAddressTxidResult').innerText += JSON.stringify(result).replace(/,/g, ", ") + "\n";
            });
        }

        function getMempoolEntry() {
            var hash = document.getElementById('getMempoolEntryHash').value.trim();
            lookupMempoolEntry(hash, function (result) {
                console.log('getMempoolEntry sent successfully');
                console.log(result);
                document.getElementById('getMempoolEntryResult').innerText = JSON.stringify(result).replace(/,/g, ", ");
            });
        }

        function lookupMempoolEntry(hash, f) {
            const method = 'getMempoolEntry';
            const params = [
                hash,
            ];
            return socket.send({ method, params }, f);
        }
    </script>
</head>

<body>
    <div class="container">
        <div class="row justify-content-center">
            <h1>Blockbook Socket.io Test Page</h1>
        </div>
        <div class="row">
            <div class="col">
                <input class="btn btn-secondary" type="button" value="Login" onclick="connect(document.getElementById('serverAddress').value)">
            </div>
            <div class="col-8">
                <input type="text" class="form-control" id="serverAddress" value="">
            </div>
            <div class="col form-inline">
                <label id="connectionStatus">not connected</label>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <input class="btn btn-secondary" type="button" value="getAddressTxids" onclick="getAddressTxids()">
            </div>
            <div class="col-8">
                <input type="text" class="form-control" id="getAddressTxidsAddresses" value="2N4Q5FhU2497BryFfUgbqkAJE87aKHUhXMp,2Mt7P2BAfE922zmfXrdcYTLyR7GUvbwSEns">
            </div>
            <div class="col form-inline">
                <input type="checkbox" id="getAddressTxidsMempool">&nbsp;
                <label>only mempool</label>
            </div>
        </div>
        <div class="row">
            <div class="col" id="getAddressTxidsResult">
            </div>
        </div>
        <div class="row">
            <div class="col">
                <input class="btn btn-secondary" type="button" value="getAddressHistory" onclick="getAddressHistory()">
            </div>
            <div class="col-8">
                <div class="row" style="margin: 0;">
                    <input type="text" style="width: 84%" class="form-control" id="getAddressHistoryAddresses" value="2N4Q5FhU2497BryFfUgbqkAJE87aKHUhXMp,2Mt7P2BAfE922zmfXrdcYTLyR7GUvbwSEns">
                    <input type="text" style="width: 7%; margin-left: 5px; margin-right: 5px;" class="form-control" id="getAddressHistoryFrom" value="0">
                    <input type="text" style="width: 7%" class="form-control" id="getAddressHistoryTo" value="5">
                </div>
            </div>
            <div class="col form-inline">
                <input type="checkbox" id="getAddressHistoryMempool">&nbsp;
                <label>only mempool</label>
            </div>
        </div>
        <div class="row">
            <div class="col" id="getAddressHistoryResult">
            </div>
        </div>
        <div class="row">
            <div class="col">
                <input class="btn btn-secondary" type="button" value="getBlockHeader" onclick="getBlockHeader()">
            </div>
            <div class="col-8">
                <input type="text" class="form-control" id="getBlockHeaderParam" value="0">
            </div>
            <div class="col">
            </div>
        </div>
        <div class="row">
            <div class="col" id="getBlockHeaderResult">
            </div>
        </div>
        <div class="row">
            <div class="col">
                <input class="btn btn-secondary" type="button" value="estimateSmartFee" onclick="estimateSmartFee()">
            </div>
            <div class="col-8">
                <input type="text" class="form-control" id="estimateSmartFeeBlocks" value="20">
            </div>
            <div class="col form-inline">
                <input type="checkbox" id="estimateSmartFeeConservative" checked>&nbsp;
                <label>conservative</label>
            </div>
        </div>
        <div class="row">
            <div class="col" id="estimateSmartFeeResult">
            </div>
        </div>
        <div class="row">
            <div class="col">
                <input class="btn btn-secondary" type="button" value="estimateFee" onclick="estimateFee()">
            </div>
            <div class="col-8">
                <input type="text" class="form-control" id="estimateFeeBlocks" value="20">
            </div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col" id="estimateFeeResult">
            </div>
        </div>
        <div class="row">
            <div class="col">
                <input class="btn btn-secondary" type="button" value="getInfo" onclick="getInfo()">
            </div>
            <div class="col-10" id="getInfoResult">
            </div>
        </div>
        <div class="row">
            <div class="col">
                <input class="btn btn-secondary" type="button" value="getDetailedTransaction" onclick="getDetailedTransaction()">
            </div>
            <div class="col-8">
                <input type="text" class="form-control" id="getDetailedTransactionHash" value="474e6795760ebe81cb4023dc227e5a0efe340e1771c89a0035276361ed733de7">
            </div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col" id="getDetailedTransactionResult">
            </div>
        </div>
        <div class="row">
            <div class="col">
                <input class="btn btn-secondary" type="button" value="sendTransaction" onclick="sendTransaction()">
            </div>
            <div class="col-8">
                <input type="text" class="form-control" id="sendTransactionHex" value="010000000001019d64f0c72a0d206001decbffaa722eb1044534c74eee7a5df8318e42a4323ec10000000017160014550da1f5d25a9dae2eafd6902b4194c4c6500af6ffffffff02809698000000000017a914cd668d781ece600efa4b2404dc91fd26b8b8aed8870553d7360000000017a914246655bdbd54c7e477d0ea2375e86e0db2b8f80a8702473044022076aba4ad559616905fa51d4ddd357fc1fdb428d40cb388e042cdd1da4a1b7357022011916f90c712ead9a66d5f058252efd280439ad8956a967e95d437d246710bc9012102a80a5964c5612bb769ef73147b2cf3c149bc0fd4ecb02f8097629c94ab013ffd00000000">
            </div>
            <div class="col">
            </div>
        </div>
        <div class="row">
            <div class="col" id="sendTransactionResult">
            </div>
        </div>
        <div class="row">
            <div class="col">
                <input class="btn btn-secondary" type="button" value="subscribe hashblock" onclick="subscribeHashBlock()">
            </div>
        </div>
        <div class="row">
            <div class="col" id="subscribeHashBlockResult">
            </div>
        </div>
        <div class="row">
            <div class="col">
                <input class="btn btn-secondary" type="button" value="subscribe addresstxid" onclick="subscribeAddressTxid()">
            </div>
            <div class="col-8">
                <input type="text" class="form-control" id="subscribeAddressTxidAddresses" value="2MzTmvPJLZaLzD9XdN3jMtQA5NexC3rAPww,2NAZRJKr63tSdcTxTN3WaE9ZNDyXy6PgGuv">
            </div>
            <div class="col">
            </div>
        </div>
        <div class="row">
            <div class="col" id="subscribeAddressTxidResult">
            </div>
        </div>
        <div class="row">
            <div class="col">
                <input class="btn btn-secondary" type="button" value="getMempoolEntry" onclick="getMempoolEntry()">
            </div>
            <div class="col-8">
                <input type="text" class="form-control" id="getMempoolEntryHash" value="">
            </div>
            <div class="col">
            </div>
        </div>
        <div class="row">
            <div class="col" id="getMempoolEntryResult">
            </div>
        </div>
    </div>
</body>
<script>
    document.getElementById('serverAddress').value = window.location.protocol.replace("http", "ws") + "//" + window.location.host;
</script>

</html>